<template>
	<view class="content">
		<view class="nav">
			<view v-for="(item, index) in category" @click="SwitchVariety(item, index)" :key="index"
				:class="{ active: activeIndex === index }">{{ item }}</view>
		</view>
		<view class="cont mt-10" v-if="activeIndex == 0">
			<view v-for="(row, index) in tableData" :key="index">
				<view class="text"> {{ row.Submission_Time }} </view>
				<view class="item">
					<view class="title"> {{ row.Cause }} </view>
					<view class="con"> 对方企业: {{ row.Enterprise_Name }} </view>
					<view class="foot">
						<button :loading="loading" size="mini" class="btn" v-if="row.Row_Status != '1'"
							@click="EditAction('1', row.Group_Seek_Message_SerialNumber, 0)">
							已读
						</button>
						<button :loading="loading" size="mini" class="btn" v-if="row.Row_Status != '2'"
							@click="EditAction('2', row.Group_Seek_Message_SerialNumber, 0)">
							删除
						</button>
					</view>
				</view>
			</view>
			<view class="text-center font-sm">{{ loadingText }}</view>
		</view>
		<view class="cont mt-10" v-if="activeIndex == 1">
			<view v-for="(row, index) in tableData" :key="index">
				<view class="text"> {{ row.Submission_Time }} </view>
				<view class="item">
					<view class="title"> {{ row.Cause }} </view>
					<view class="con"> 对方企业: {{ row.Enterprise_Name }} </view>
					<view class="foot">
						<button :loading="loading" size="mini" class="btn" v-if="row.Row_Status != '1'"
							@click="EditAction('1', row.Group_Message_SerialNumber, 1)">
							已读
						</button>
						<button :loading="loading" size="mini" class="btn" v-if="row.Row_Status != '2'"
							@click="EditAction('2', row.Group_Message_SerialNumber, 1)">
							删除
						</button>
					</view>
				</view>
			</view>
			<view class="text-center font-sm">{{ loadingText }}</view>
		</view>
		<view v-if="tag" @click="goTop" class="bg-white flex  align-center"
			style="width: 120rpx;height: 120rpx;border-radius: 50%;box-shadow: 0 0 15rpx rgba(0,0,0,.5);position: fixed;right: 80rpx;bottom: 80rpx;justify-content: center;">
			<image style="height: 80%;width: 80%;" src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
import {
	GoodsFileInquiry,
	getInquiryIDOriginal,
	getEditAction,
} from "@/api/global.js";
import {
	getGroupMessageAllAction,
	getGroupSeekMessageAllAction,
} from "@/api/group.js";
const app = getApp();
export default {
	data() {
		return {
			activeIndex: 0,
			category: [
				//用户专区分类筛选
				"我的采购信息",
				"我的摘牌信息",
			],
			loading: false,
			active: 0,
			activeName: "first",
			tableData: [], // 表格数据
			total: 0, // 总数
			form: {
				hotspot: "0", //0是消息1消息提示
				Type: "1", //1是自己0是全部
				Row_Status: "", //空是全部0是未读1是已读2是删除
				token: uni.getStorageSync("token"),
				Enterprise_Info_SerialNumber: uni.getStorageSync("enterprise"),
				page: 1, //页数
				limit: 5, //每页数据条数
			},
			timer: null,
			loadingText: '向下拉取加载更多',
			tag: false,
			scrollTop: 0,
		};
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop
	},
	watch: {
		scrollTop: function (newValue, oldValue) {
			if (newValue > 800) {
				this.tag = true
			} else {
				this.tag = false
			}
		},
	},
	onReachBottom() {
		if (this.activeIndex == 0) {
			if (this.loadingText != '没有更多了') {
				this.form.page++
				this.throttling2();
			}
		} else {
			if (this.loadingText != '没有更多了') {
				this.form.page++
				this.throttling1();
			}
		}
	},
	methods: {
		async EditAction(Row_Status, SerialNumber, i) {
			if (!this.loading) {
				this.loading = true
				let data;
				let Data;
				let message;
				if (i == 0) {
					data = {
						Primary_Key_Name: "Group_Seek_Message_SerialNumber", //主键名
						Primary_Key: SerialNumber, //主键值
						Data: "group_seek_message",
						token: uni.getStorageSync("token"),
					};
				} else {
					data = {
						Primary_Key_Name: "Group_Message_SerialNumber", //主键名
						Primary_Key: SerialNumber, //主键值
						Data: "group_message",
						token: uni.getStorageSync("token"),
					};
				}
				const res = await getInquiryIDOriginal({
					data,
				});
				if (
					(res.redirect && res.redirect == "REDIRECT") ||
					res.REDIRECT == "REDIRECT"
				) {
					uni.navigateTo({
						url: "/pages/My/Login",
					});
				}
				console.log(res)
				if (res.length == 0) {
					this.loading = false
					return
				}
				res[0].Row_Status = Row_Status;
				if (i == 0) {
					Data = {
						Data: JSON.stringify({
							Modify: {
								group_seek_message: res,
							},
						}),
						token: uni.getStorageSync("token"),
					};
					message = "已读取消息";
				} else {
					Data = {
						Data: JSON.stringify({
							Modify: {
								group_message: res,
							},
						}),
						token: uni.getStorageSync("token"),
					};
					message = "已删除消息";
				}
				this.getEdit(Data, message, i);
			}
		},
		async getEdit(data, message, i) {
			const res = await getEditAction({
				data,
			});
			this.loading = false;
			if (res.redirect && res.redirect == "REDIRECT") {
				uni.navigateTo({
					url: "/pages/My/Login",
				});
			} else if (res.Status == "success") {
				console.log(res);
				uni.showToast({
					title: message,
					icon: 'none'
				})
				this.form.page = 1;
				this.form.Row_Status = "";
				this.tableData = []
				if (i == 0) {
					this.getList1(this.form);
				} else {
					this.getList(this.form);
				}
			}
		},
		async SwitchVariety(i, index) {
			if (this.active == index) {
				return
			}
			//切换
			this.tableData = []
			this.goTop()
			this.active = index;
			if (index == 0) {
				this.form.page = 1;
				this.form.Row_Status = "";
				this.getList1(this.form);
			} else {
				this.form.page = 1;
				this.form.Row_Status = "";
				this.getList(this.form);
			}
			this.activeIndex = index;
		},
		throttling1(delay = 500) {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.getList(this.form)
			}, delay)
		},
		throttling2(delay = 500) {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.getList1(this.form)
			}, delay)
		},
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0
			})
		},
		async getList(data) {
			uni.showLoading({
				title: '加载中...'
			})
			this.loadingText = '加载中...'
			const res = await getGroupMessageAllAction({
				data,
			});
			uni.hideLoading()
			if (
				(res.redirect && res.redirect == "REDIRECT") ||
				res.REDIRECT == "REDIRECT"
			) {
				uni.navigateTo({
					url: "/pages/My/Login",
				});
			} else if (res.Status == "success") {
				console.log(res);
				this.tableData.push(...res.tableData)
				this.total = Number(res.limit);
				if (this.total == this.tableData.length) {
					this.loadingText = '没有更多了'
				} else {
					this.loadingText = '下拉加载更多'
				}
			}
		},
		async getList1(data) {
			uni.showLoading({
				title: '加载中...'
			})
			this.loadingText = '加载中...'
			const res = await getGroupSeekMessageAllAction({
				data,
			});
			uni.hideLoading()
			if (
				(res.redirect && res.redirect == "REDIRECT") ||
				res.REDIRECT == "REDIRECT"
			) {
				uni.navigateTo({
					url: "/pages/My/Login",
				});
			} else if (res.Status == "success") {
				console.log(res);
				this.tableData.push(...res.tableData)
				this.total = Number(res.limit);
				if (this.total == this.tableData.length) {
					this.loadingText = '没有更多了'
				} else {
					this.loadingText = '下拉加载更多'
				}
			}
		},
	},
	mounted() {
		this.getList1(this.form);
	},
};
</script>

<style lang="scss">
.content {
	background-color: #f5f5f5;
	// height: calc(100vh);
	width: 100%;

	.nav {
		z-index: 100;
		position: fixed;
		top: 0;
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;

		// font-weight: bold;
		view {
			text-align: center;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 10rpx;
			box-sizing: border-box;
		}

		.active {
			border-bottom: 3px solid #28a745;
			font-size: 30rpx;
		}
	}

	.cont {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		view {
			width: 100%;
		}

		.text {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			padding-top: 10rpx;
			font-size: 26rpx;
			color: #7d7d7d;
		}

		.item {
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 40rpx;
			box-sizing: border-box;
			margin: 0 0 30rpx 0;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 17px;
			}

			.con {
				display: flex;
				align-items: center;
				// justify-content: flex-end;
				padding: 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
			}

			.foot {
				display: flex;

				.btn:first-child {
					background: #28a745;
					color: #fff;
				}

				.btn:last-child {
					background: #f56c6c;
					color: #fff;
				}
			}
		}
	}
}
</style>